<template>
  <div class="service news">
    <section class="inner_banner">
      <div class="picture_container">
        <img src="../../images/commoncard/swiperCard/dangjian.png" title="党建专栏inbanner" alt="党建专栏inbanner"
          class="inner_banner_pc">
      </div>
    </section>
    <div class="nav">
      <div class="center flex flex_column_center   flex_row_strat">
        <div class="flex item">
          <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
            class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a @click="currentLoactiongo()"
            title="党建专栏">党建专栏</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a href="javascript:;"
            title="党建专栏" class="active" onclick="return false">{{ currentLoaction }}</a>
        </div>
      </div>
    </div>
    <section class="center main1 clear_float">
      <div class="inner_left">
        <div class="center" :style="dynamicStyle">
          <div class="left">
            <div class="left_service_monu">
              <div class="title">
                <p class="cn">党建专栏 </p>
                <p class="en">Party Building Column</p>
              </div>
              <div class="content">
                <ul>
                  <div :title="item.title" ref="letfNews" :class="{ active: item.active }"
                    v-for="(item, index)  in serviceItem " :key="index" @click="clickServiceItem(item, index)">
                    <li class="flex flex_column_center hoverTips">
                      <div class="icon">
                        <div class="picture_container">
                          <img :src="iconimagetype()" :alt="item.title" :title="item.title">
                          <img class="active_icon" :src="iconimagetype()" :alt="item.title" :title="item.title"
                            v-if="item.active">
                          <img class="active_icon" v-else :src="iconimagetype()" :alt="item.title" :title="item.title">
                        </div>
                      </div>
                      {{ item.title }}
                    </li>
                  </div>
                </ul>
              </div>
            </div>
            <div class="left_tel">
              <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
            </div>
          </div>
        </div>
      </div>

      <div class="right" v-if="showDetail == ''">
        <div class="content">
          <div class="black flex flex_row_justify hoverTips" v-for="(item, index) in rightcontent" :key="index"
            :title="item.title" @click.stop="getnewsDetail(item, index)">
            <div class="img">
              <div class="picture_container">
                <img :src="item.bgPic" :alt="item.title" :title="item.title">
              </div>
            </div>
            <div class="txt">
              <h4 class="title">{{ item.title }}</h4>
              <p class="time">发布日期：{{ item.createTime }}</p>
              <p class="abstract"></p>
            </div>
          </div>
        </div>
        <!-- 加载更多 -->
        <div class="loadData hide">
          <div class="">
            <a href="javascript:;" class="loadStart active transition">加载更多</a>
            <a href="javascript:;" class="loading">正在加载中<span class="iconfont icon-jiazaizhong"></span></a>
            <a href="javascript:;" class="loadEnd">我也是有底线的~</a>
          </div>
        </div>
        <!-- 分页 -->
        <div class="paging ">
          <el-pagination background @current-change="handlePageChange" :current-page="currentPage"
            layout="total, prev, pager, next" :total="total" next-click="gotonextpage">
          </el-pagination>
        </div>
      </div>
      <div class="right" v-else>
        <div class="content">
          <section>
            <section v-html="showDetail.intro"></section>
          </section>
        </div>
        <div class="cut" v-if="showpages">


        </div>


      </div>
    </section>
  </div>
</template>
<script>
import { config } from "@/common/config.js"
import { extractDateFromString } from "@/utils/methods.js"
import scrollMixin from '@/mixins/scrollMixin';
export default {
  mixins: [scrollMixin],
  name: 'homepage',
  data () {
    return {
      config,
      serviceItem: [],
      rightTitle: '',
      rightcontent: [],
      rightshow: false,
      currentLoaction: '',
      routeParam: '',
      currentkey: 0,
      showDetail: "",
      currentPage: 1,
      currentItemId: "",
      total: 0,
      currentid: "",
      currentpageTitle: {
        up: '',
        next: '',
        clickindex: ''

      },
      showpages: false,
      showpagesnav: true
    }
  },
  watch: {
    $route: {
      handler (newVal, oldVal) {
        // 当路由参数变化时，执行相应的操作，比如重新加载数据等
        this.currentkey = newVal.query.index ? newVal.query.index : 0
        this.fetchRouteParams(newVal);
      },
      immediate: true,
      deep: true // 深度监听对象的变化
    }
  },
  created () {
    // this.init()

  },
  mounted () {

  },
  methods: {
    fetchRouteParams () {
      this.currentLoaction = this.$route.query.title; // 根据实际情况替换paramName1
      this.init()
    },
    previewPic (code) {
      return config.url + config.prefix + '/file/previewFile?code=' + code
    },
    //
    init () {
      let params = {
        tenantId: 1,
        id: 9
      }
      // 获取产品树
      this.$http.get(this.$api.columnApi.listPlateCatAndChildren, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data
          this.currentLoaction = res.data[0].title
          if (objArray.length > 0) {
            for (let [index, item] of objArray.entries()) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              if (index == 0) {
                detail.active = true
              } else {
                detail.active = false
              }
              result.push(detail)
            }
          }
          this.serviceItem = result
          this.clickServiceItem(this.serviceItem[this.currentkey], this.currentkey)


        }
      })
    },
    clickServiceItem (data, index) {
      this.gotop()
      this.$nextTick(() => {
        this.$refs.letfNews[index].classList.add('active');
        for (let i = 0; i < this.$refs.letfNews.length; i++) {
          if (i != index) {
            this.$refs.letfNews[i].classList.remove('active');
          }
        }
      });
      this.currentLoaction = data.title
      this.rightTitle = data.title
      this.currentLoaction = data.title
      this.currentleft = data.industryCat
      this.currentItemId = data.id
      this.currentPage = 1
      this.getdetail()
    },
    gotop() {
      window.scrollTo(0, 0)
    },
    //获取右边详情
    getdetail () {

      this.showDetail = ''

      let params = {
        pageNum: 1,
        pageSize: 5,
        data: {
          itemId: this.currentItemId
        },
        current: this.currentPage,
      }

      this.$http.post(this.$api.columnApi.getProdInfo, params).then(res => {
        if (res.code == 200) {
          // this.rightcontent = res.data.list
          // this.rightshow = true
          let result = []
          const objArray = res.data.list
          this.total = res.data.total
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              detail.createTime = extractDateFromString(item.createTime)
              detail.industryCat = item.industryCat
              detail.intro = item.intro
              result.push(detail)
            }
          }
          this.rightcontent = result
          this.showpages = true
        }
      })
    },
    handlePageChange (newPage) {
      this.currentPage = newPage;
      let pageNum = newPage;
      let params = {
        pageNum: pageNum,
        pageSize: 10,
        data: {
          itemId: this.currentItemId
        },
        current: this.currentPage,
      }
      this.$http.post(this.$api.columnApi.getProdInfo, params).then(res => {
        if (res.code == 200) {
          // this.rightcontent = res.data.list
          // this.rightshow = true
          let result = []
          const objArray = res.data.list
          this.total = res.data.total
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              detail.createTime = extractDateFromString(item.createTime)
              detail.industryCat = item.industryCat
              detail.intro = item.intro
              result.push(detail)
            }
          }
          this.rightcontent = result
          this.showpages = true
        }
      })

    },
    // 获取详情
    getnewsDetail (data, index) {
      this.currentpageTitle.clickindex = index
      this.showDetail = data

    },
    // 详情跳转
    detailNaV (index) {

      if (this.currentpageTitle.clickindex == this.rightcontent.length - 2) {
        this.currentpageTitle.clickindex = index + 1
        this.showpagesnav = false
        his.showDetail = this.rightcontent[index + 1]
      } else {
        this.currentpageTitle.clickindex = index + 1
        this.showDetail = this.rightNewsdata[index + 1]
        this.showpages = true
        this.showpagesnav = true
      }


    },
    detailNaVup (data, index) {
      if (index == 0) { return }
      this.currentpageTitle.clickindex = index - 1
      this.showDetail = this.rightcontent[index - 1]
      this.showpagesnav = true
    }
    ,
    currentLoactiongo () {
      window.location.reload()
    },
    iconimagetype (date) {
      let preSrc
      preSrc = require('../../images/dangjian/dangjian.png')
      return preSrc
    }
  }
}
</script>
<style scoped>
@import '@/styles/index.scss';

.service .main1 {
  padding-bottom: 40px;
  margin-top: 20px;
}

.paging {
  text-align: center;
}

.service .main1 .left .left_service_monu .title {
  background-color: rgb(169, 32, 32) !important;
}

.service .main1 .left .left_service_monu .content .active li {
  color: rgb(169, 32, 32) !important;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #eb0000;
}

.center.main1.clear_float {
  min-height: 800px;
}
</style>